<script setup lang="ts"></script>

<template>
    <div class="g-container">
        <div class="g-top">
            <div class="line"></div>
        </div>
        <div class="g-bottom"></div>
        <p>Harmony <span>O</span>S</p>
    </div>
    <svg>
        <filter
            id="fractal"
            filterUnits="objectBoundingBox"
            x="0%"
            y="0%"
            width="100%"
            height="100%"
        >
            <feTurbulence
                id="turbulence"
                type="fractalNoise"
                baseFrequency="0.005 0.005"
                numOctaves="10"
            >
                <animate
                    attributeName="baseFrequency"
                    dur="30s"
                    values="0.005 0.005;0.05 0.3;0.005 0.005"
                    repeatCount="indefinite"
                />
            </feTurbulence>
            <feDisplacementMap
                in="SourceGraphic"
                scale="15"
            ></feDisplacementMap>
        </filter>
    </svg>
</template>

<style scoped lang="scss">
.g-container {
    margin: auto;
}
p {
    position: fixed;
    bottom: calc(50vh - 150px);
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 36px;
    color: #fff;
    text-align: center;
    margin-top: 12px;

    span {
        display: inline-block;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            width: 18px;
            left: 50%;
            transform: translate(-50%, 4px);
            border-bottom: 4px solid #2d60aa;
        }
    }
}
svg {
    position: absolute;
}
.g-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50vh;
    background: #000;
    overflow: hidden;
    z-index: 10;

    &::before {
        content: '';
        position: absolute;
        border-radius: 50%;
        bottom: 0;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, 100px);
        box-sizing: border-box;
        background: #000;
        border: 25px solid #fff;
        z-index: 1;
        box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8),
            0 0 8px 2px rgba(255, 255, 255, 0.6);
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: repeating-radial-gradient(
            circle at 50% 100%,
            transparent,
            transparent 5px,
            #3a77f6 5.2px,
            #3a77f6 6.2px,
            transparent 6.5px
        );
        mask: radial-gradient(
            circle at 50% 100%,
            rgba(255, 255, 255, 1),
            transparent 25%,
            transparent
        );
        z-index: 0;
    }
}
.g-bottom {
    position: fixed;
    top: 50vh;
    left: 0;
    width: 100vw;
    height: 50vh;
    background: #000;
    overflow: hidden;
    filter: url(#fractal);

    &::before {
        content: '';
        position: absolute;
        border-radius: 50%;
        top: 0;
        width: 200px;
        height: 200px;
        background: #000;
        left: 50%;
        transform: translate(-50%, -100px);
        box-sizing: border-box;
        border: 25px solid #fff;
        z-index: 2;
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.8),
            0 0 8px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.6);
        filter: blur(4px);
        mask: linear-gradient(
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.9)
        );
    }
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: repeating-radial-gradient(
            circle at 50% 0,
            transparent,
            transparent 5px,
            #3a77f6 5.1px,
            #3a77f6 6.4px,
            transparent 6.5px
        );
        mask: radial-gradient(
            circle at 50% 0,
            rgba(255, 255, 255, 0.6),
            transparent 25%,
            transparent
        );
        z-index: 3;
    }
}
.line {
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 500px;
    height: 6px;
    border-radius: 50%;
    background: rgba(46, 107, 232, 0.8);
    transform: translate(-50%, -50%);
    z-index: 10;
    filter: blur(5px) contrast(1.2) brightness(1.2);
    box-shadow: 0 0 5px rgba(46, 107, 232, 0.7);
}
</style>
